<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" v-if="dialogVisible" width="65%">
sssssss
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>

</template>
<script setup lang="ts">
import { ExpandRecordApi, ExpandRecord, ExpandProcessOptionsGroup } from '@/api/biz/expand/record'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { onMounted, watch, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

/** 拓展记录 表单 */
defineOptions({ name: 'ExpandRecordForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  interviewee: undefined,
  intervieweePhone: undefined,
  intervieweePosition: undefined,
  customerRequire: undefined,
  breakthroughPoint: undefined,
  expandTime: undefined,
  businessType: undefined,
  expandProcess: undefined,
  expandSituation: undefined,
  customerType: undefined,
  customerLevel: undefined,
  nextTimeVisit: undefined,
  scenePictureUrl: undefined,
  securityReportUrl: undefined,
  serviceSchemeUrl: undefined,
  ownerUserId: undefined,
  lng: undefined,
  lat: undefined
})

const formRules = reactive({})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  console.info(123,type)
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  formLoading.value = false
  console.info(123,type)

  // resetForm()
  // 修改时，设置数据
  // if (id) {
  //   formLoading.value = true
  //   try {
  //     formData.value = await ExpandRecordApi.getExpandRecord(id)
  //   } finally {
  //     formLoading.value = false
  //   }
  // }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ExpandRecord
    console.log(data)
    if (formType.value === 'create') {
      await ExpandRecordApi.createExpandRecord(data)
      message.success(t('common.createSuccess'))
    } else {
      await ExpandRecordApi.updateExpandRecord(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    interviewee: undefined,
    intervieweePhone: undefined,
    intervieweePosition: undefined,
    customerRequire: undefined,
    breakthroughPoint: undefined,
    expandTime: undefined,
    businessType: undefined,
    expandProcess: undefined,
    expandSituation: undefined,
    customerType: undefined,
    customerLevel: undefined,
    nextTimeVisit: undefined,
    scenePictureUrl: undefined,
    securityReportUrl: undefined,
    serviceSchemeUrl: undefined,
    ownerUserId: undefined,
    lng: undefined,
    lat: undefined
  }
  formRef.value?.resetFields()
}

// 地图相关
let map = ref(null)
const mapZoom = ref(15)
const ak = ref('tEpeS8qwvQwKinQkMa7x037oI0jMYFpD')
let openMap = ref(false)
let addressInfo = reactive({
  // 地址信息
  longitude: '', // 经度
  latitude: '' // 纬度
})
watch(
  () => [openMap],
  () => {
    if (!openMap.value) {
      map.value && map.value.destroy()
    }
  },
  { deep: true }
)

const initMap = () => {
  map.value = null
  BMPGL(ak.value).then((BMapGL: any) => {
    map.value = new BMapGL.Map('baidumap')
    var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
    map.value.addControl(zoomCtrl)
    var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
    map.value.addControl(cityCtrl)
    var LocationControl = new BMapGL.LocationControl() // 添加定位控件，用于获取定位
    map.value.addControl(LocationControl)
    var scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
    map.value.addControl(scaleCtrl)
    map.value.setMapType() // 设置地图类型为标准地图模式；
    var localcity = new BMapGL.LocalCity()
    localcity.get((e: { name: any }) => {
      map.value.centerAndZoom(e.name, mapZoom.value)
    })

    setTimeout(() => {
      map.value.centerAndZoom(new BMapGL.Point(123.44138, 41.81066), mapZoom.value)
    }, 1000)

    map.value.enableScrollWheelZoom(true)
    map.value.setHeading(64.5)
    map.value.setTilt(73)

    //点击下拉框的值
    map.value.addEventListener('click', function (e: { latlng: { lng: string; lat: string } }) {
      map.value.clearOverlays()
      var point1 = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
      // 创建点标记
      var marker1 = new BMapGL.Marker(point1)
      // 在地图上添加点标记
      map.value.addOverlay(marker1)
      addressInfo.longitude = e.latlng.lng
      addressInfo.latitude = e.latlng.lat
    })
  })
}

/** 打开地图选择 */
const show = () => {
  openMap.value = true
  initMap()
}
/**
 * 确认选择
 */
const confirmSelect = () => {
  formData.value.lng = addressInfo.longitude
  formData.value.lat = addressInfo.latitude
  openMap.value = false
}
/**
 * 取消选择
 */
const cancel = () => {
  openMap.value = false
}
</script>

<style>
.BMap_cpyCtrl,
.anchorBL {
  display: none;
}
</style>
